<template>
    <div>
        <p class="perrightwdzl">我的资料</p>
            <div class="perform" :class="{isreadonly:!isreadonly}">
                <form action>
                    <div class="input-box">
                    <input
                        type="button"
                        value="男士"
                        @click="mabtn"
                        class="sexbtn"
                        :class="{active:userd.sex=='男'}"
                    > 
                    <input
                        type="button"
                        value="女士"
                        @click="febtn"
                        class="sexbtn"
                        :class="{active:userd.sex=='女'}"
                    >
                    <div style="height:30px;width:0px"></div>
                    </div>
                    <div class="input-box">
                    昵称
                    <input type="text" class="inputf" :readonly="isreadonly" v-model="userd.username">
                    </div>
                    <div class="input-box">
                    密码
                    <input type="password" class="inputf" :readonly="isreadonly" v-model="userd.password" @blur="pwyz">
                    </div>
                    <div class="input-box">
                    手机
                    <input type="text" class="inputf" :readonly="isreadonly" v-model="userd.phone" @blur="pyz">
                    </div>
                    <div class="input-box">
                    邮箱
                    <input type="text" class="inputf" :readonly="isreadonly"  v-model="userd.email">
                    </div>
                    <div class="input-box">
                    <input type="button" value="保存" class="mytb" @click="saveclick" :class="{noal:isreadonly}">
                    <input type="button" value="修改" class="mytb mytb2" @click="isreadonly=false">
                    </div>
                </form>
            </div>
    </div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
    data() {
    return {
      sexflag: false,
      isreadonly:true,
			isnull:false,
      userd:{ 
        phone:"11",
        password:"",
        email:"",
        sex:"男",
        username:""
      }
    };
  },
  computed: {
    ...mapGetters(['login',"uid"])     //boolean
  },
	watch:{
		isreadonly(v){
			if(!this.isreadonly){
				document.getElementsByClassName("inputf")[0].focus()
			}
		}
	},
  methods: {
		pyz(){
			var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
			if(!myreg.test(this.userd.phone)){
				alert("请输入11位手机号");
				this.isnull=true;
			}else{
				this.isnull=false;
			}
		},
		pwyz(){
			if(this.userd.password.length<6||this.userd.password.length>16){
				this.isnull=true;
				alert("请输入6-16位密码");
			}else{
				this.isnull=false;
			}
		},
    mabtn() {
      if(!this.isreadonly){
        this.userd.sex = "男";
      }
      
    },
    febtn(){
      if(!this.isreadonly){
        this.userd.sex='女'
      }
    },
    saveclick(){
      if(!this.isreadonly){
				
				if(!this.isnull){
					this.axios({
					  method:"put",
					  url:`${this.$config.dataUrl}/users/action/modify`,
					  params:this.userd
					}).then(res=>{
					 if(res.data.status==200){
						 this.isreadonly=true;
					   alert("保存成功")
					 }
					})
				}else{
					alert("")
				}
      }
    }
  },
  mounted() {
    this.axios({
      url:`${this.$config.dataUrl}/users/${this.uid}`
    }).then(res=>{
      if(res.status==200){
      this.userd=res.data.data;
			if(this.userd.sex==null){
				this.userd.sex="男"
			}
      }
     
    })
  }
}
</script>
<style  scoped>
.perrightwdzl {
  margin-top: .13rem;
  font-size: 0.16rem;
  margin-bottom:0;
}
.input-box {
  margin-top: .20rem;
}
.mytb {
  background-color: #b49d7e;
  width: .50rem;
  height: .30rem;
  border: 0;
  color: #fffefe;
  font-size: .12rem;
  float: left;
}
.mytb2 {
  margin-left: .20rem;
}
.sexbtn {
  width: .50rem;
  height: .30rem;
  border: 0;
  color: #000;
  outline: none;
  float: left;
	cursor: not-allowed;
}
.isreadonly .sexbtn{
	cursor: pointer;
}
.sexbtn.active {
  background-color: #b49d7e;
  color: #fffefe;
}
.perform {
  font-size: .12rem;
  line-height:0.12rem;
}
.inputf {
  display: block;
  height: .50rem;
  width: 3.80rem;
  outline: none;
  border: 0.01rem #ccc solid;
  padding-left: 0.1rem;
  background-color: #f2f2f2;
  margin-top: 0.06rem;
}
input{
	cursor:not-allowed
}
.isreadonly input{
	cursor: text;
}
.noal{
	cursor: not-allowed;
}
</style>
